<template>
    <div class="bg">
        <div class="top">
            <div>
                <span class="topa" v-bind:class="{topw:achecked===checkindex}"
                      @mousemove="isAricon=true" @mouseleave="isAricon=false" @click="checksearch(0)">我的购买</span>
            </div>
            <div class="topd">
            </div>
        </div>
        <!--        没有数据-->
        <div class="show">
            <span v-if="notdata" class="el-icon-film"
                  style="font-family: 隶书;font-size: 30px;color: gray">暂时没有数据</span>
        </div>
        <!--        有数据-->
        <div v-if="!notdata">

            <el-row style="margin-left: 25px">
                <el-col :span="23">
                    <el-col :span="6">
                        <div class="grid-content bg-purple"></div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">课程名称</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">教师名称</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">购买时间</div>
                    </el-col>

                </el-col>
            </el-row>
            <div class="haveData" v-for="(item,index) in myPayedClass" :key="index">
                <div class="img_div"><img :src="item.courseCover"></div>
                <div class="sp_div"><span>{{item.courseTitle}}</span></div>
                <div class="sp_div" style="margin-left: 150px"><span>{{item.teacherName}}</span></div>
                <div class="sp_div" style="margin: 20px 0 0 150px "><span>{{item.payTime}}</span></div>
                <div class="r_div">
                    <div>
                        <el-button plain @click="tiaozhuan(item.courseId)">进入学习</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "course",
        data() {
            return {
                achecked: 0,
                checkindex: 0,
                notdata: true,
                userData:{},
                myPayedClass:[],
            }
        },
        methods:{

            //查询用户
            searchMember() {
                var that = this;
                var token = sessionStorage.getItem("token");
                this.$http.get(`/member/findMemberByToken/${token}`).then(function (successCallback) {
                    if (successCallback.data.code === 2000) {
                        that.userData = successCallback.data.result;
                        that.searchPayedOrder();
                    }
                })
            },
            //查询购买过的课程
            searchPayedOrder(){
                var that = this;
                this.$http.get(`/order/getPayedOrderByMemberID/${that.userData.id}`).then(function (successCallback) {
                    console.log(successCallback)
                    if (successCallback.data.code===200){
                        that.myPayedClass=successCallback.data.result;
                        console.log(that.myPayedClass)
                        that.notdata=false;
                        if (that.myPayedClass.length===0){
                            that.notdata=true;
                        }
                    }
                })
            },
            tiaozhuan(id) {
                this.$router.push({
                    path:'/courseDetails',
                    query:{
                        key:id
                    }
                })
            },
        },
        created() {
            this.searchMember();
        }
    }
</script>

<style scoped>
</style>